<template>
  <hips-view>
    <hips-nav-bar
      slot="header"
      title="Icon 图标"
      :back-button="{
        showLeftArrow: true,
      }"
      @nav-bar-back-click="$router.back()"
    />

    <demo-block title="基础用法">
      <hips-row>
        <hips-col span="8">
          <div class="icon-block">
            <hips-icon
              :name="icons.outline[0].name"
              :size="40"
            />
            <span style="font-size: 12px; padding-top: 8px;">
              {{ icons.outline[0].name }}
            </span>
          </div>
        </hips-col>
      </hips-row>
    </demo-block>

    <demo-block title="颜色">
      <hips-row>
        <hips-col span="8">
          <div class="icon-block">
            <hips-icon
              :name="icons.outline[0].name"
              :size="40"
              color="red"
            />
            <span style="font-size: 12px; padding-top: 8px;">
              {{ icons.outline[0].name }}
            </span>
          </div>
        </hips-col>
        <hips-col span="8">
          <div class="icon-block">
            <hips-icon
              :name="icons.outline[0].name"
              :size="40"
              color="blue"
            />
            <span style="font-size: 12px; padding-top: 8px;">
              {{ icons.outline[0].name }}
            </span>
          </div>
        </hips-col>
      </hips-row>
    </demo-block>

    <demo-block title="尺寸">
      <hips-row>
        <hips-col span="8">
          <div class="icon-block">
            <hips-icon
              :name="icons.outline[0].name"
              :size="40"
            />
            <span style="font-size: 12px; padding-top: 8px;">
              {{ icons.outline[0].name }}
            </span>
          </div>
        </hips-col>
        <hips-col span="8">
          <div class="icon-block">
            <hips-icon
              :name="icons.outline[0].name"
              :size="30"
            />
            <span style="font-size: 12px; padding-top: 8px;">
              {{ icons.outline[0].name }}
            </span>
          </div>
        </hips-col>
        <hips-col span="8">
          <div class="icon-block">
            <hips-icon
              :name="icons.outline[0].name"
              :size="20"
            />
            <span style="font-size: 12px; padding-top: 8px;">
              {{ icons.outline[0].name }}
            </span>
          </div>
        </hips-col>
      </hips-row>
    </demo-block>

    <demo-block title="基础风格">
      <hips-row>
        <hips-col
          v-for="(item, index) in icons.basic"
          :key="index"
          span="8"
        >
          <div class="icon-block">
            <hips-icon
              :name="item.name"
              :size="40"
              color="#1f8ceb"
            />
            <span style="font-size: 12px; padding-top: 8px;">
              {{ item.name }}
            </span>
          </div>
        </hips-col>
      </hips-row>
    </demo-block>

    <demo-block title="线框风格">
      <hips-row>
        <hips-col
          v-for="(item, index) in icons.outline"
          :key="index"
          span="8"
        >
          <div class="icon-block">
            <hips-icon
              :name="item.name"
              :size="40"
              color="#1f8ceb"
            />
            <span style="font-size: 12px; padding-top: 8px;">
              {{ item.name }}
            </span>
          </div>
        </hips-col>
      </hips-row>
    </demo-block>

    <demo-block title="实底风格">
      <hips-row>
        <hips-col
          v-for="(item, index) in icons.filled"
          :key="index"
          span="8"
        >
          <div class="icon-block">
            <hips-icon
              :name="item.name"
              :size="40"
              color="#1f8ceb"
            />
            <span style="font-size: 12px; padding-top: 8px;">
              {{ item.name }}
            </span>
          </div>
        </hips-col>
      </hips-row>
    </demo-block>
  </hips-view>
</template>

<script>
import BasicView from '@/mixin/basic-view';
import { Icon, Row, Col } from '@hips/vue-ui';
import Config from '@/icons';

export default {
  components: {
    [Icon.name]: Icon,
    [Row.name]: Row,
    [Col.name]: Col,
  },
  mixins: [ BasicView ],
  data() {
    return {
      icons: Config,
    };
  },
  mounted() {
    console.log('this.icons = ', this.icons);
  },
};
</script>

<style scoped lang="stylus">
.hips-col {
    text-align: center
    height: 100px
    float: none
    display: inline-block
    vertical-align: middle
  }

  .hips-icon {
    display: block
    margin: 15px 0    
  }
</style>
